<template>
    <div id="header-content">
        <el-form id="header-query" label-width="110px" style="width: 63%" ref="searchParam" :model="searchParam">
            <el-form-item label="业务日期" prop="businessDate">
                <el-date-picker
                    v-model="searchParam.businessDate"
                    type="date"
                    size="mini"
                    filterable
                    clearable
                    placeholder="选择日期"
                    format="yyyy-MM-dd"
                    value-format="yyyyMMdd"
                    style="width: 100%"
                >
                </el-date-picker>
            </el-form-item>
            <el-form-item label="产品序号/名称" prop="fundIdList">
                <el-select
                    v-model="searchParam.fundIdList"
                    size="mini"
                    filterable
                    clearable
                    multiple
                    collapse-tags
                    :class="{ isInput: searchParam.fundIdList.length > 0 }"
                >
                    <el-option
                        v-for="item in fundIds"
                        :key="item.dictKey"
                        :label="item.dictKey + ' ' + item.dictKeyName"
                        :value="item.dictKey"
                    ></el-option>
                </el-select>
            </el-form-item>
            <!-- <el-form-item label="组合编码/名称" prop="groupCodeList">
                <el-select
                    v-model="searchParam.groupCodeList"
                    size="mini"
                    filterable
                    clearable
                    multiple
                    collapse-tags
                    :class="{ isInput: searchParam.groupCodeList.length > 0 }"
                >
                    <el-option v-for="item in combinations" :key="item.dictKey" :label="item.dictKey + ' ' + item.dictKeyName" :value="item.dictKey">
                    </el-option>
                </el-select>
            </el-form-item> -->
            <el-form-item label="融资/融券" prop="fundDirection">
                <el-select v-model="searchParam.fundDirection" size="mini" filterable clearable>
                    <el-option v-for="item in fundDirections" :key="item.dictKey" :label="item.dictKeyName" :value="item.dictKey"> </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="产品类型" v-show="isOpen" prop="productTypeList">
                <el-select
                    v-model="searchParam.productTypeList"
                    size="mini"
                    filterable
                    clearable
                    multiple
                    collapse-tags
                    :class="{ isInput: searchParam.productTypeList.length > 0 }"
                >
                    <el-option v-for="item in productTypes" :key="item.dictKey + item.dictKeyName" :label="item.dictKeyName" :value="item.dictKey">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="法定购回日期" v-show="isOpen" prop="redeemLawdate">
                <el-date-picker
                    v-model="searchParam.redeemLawdate"
                    type="date"
                    size="mini"
                    filterable
                    clearable
                    placeholder="选择日期"
                    format="yyyy-MM-dd"
                    value-format="yyyyMMdd"
                    style="width: 100%"
                >
                </el-date-picker>
            </el-form-item>
            <el-form-item label="交易市场" v-show="isOpen" prop="marketName">
                <el-select v-model="searchParam.marketName" size="mini" filterable clearable>
                    <el-option v-for="item in marketTypes" :key="item.dictKey" :label="item.dictKeyName" :value="item.dictKeyName"> </el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <div style="margin-top: 6px">
            <span id="show-content" @click="openBtn">
                更多查询条件
                <i :class="{ 'el-icon-arrow-down': !isOpen, 'el-icon-arrow-up': isOpen }"></i>
            </span>
            <el-button type="primary" size="mini" @click="handleButton('search')">查询</el-button>
            <el-button type="primary" size="mini" @click="handleButton('reset')">重置</el-button>
            <el-dropdown @command="handleButton" style="margin: 0 4px">
                <el-button type="primary" size="mini">导出<i class="el-icon-arrow-down el-icon--right"></i></el-button>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="currentLoadout">导出当前页</el-dropdown-item>
                    <el-dropdown-item command="allLoadout">导出所有页</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
            <el-button type="primary" size="mini" @click="handleButton('doLayout')"> 布局设置</el-button>
        </div>
    </div>
</template>
<script lang="ts">
import { Component, Vue, Watch, Prop } from 'vue-property-decorator';
import XEUtils from 'xe-utils';

@Component({ name: 'ExchangeHgQueryCondition', components: {} })
export default class ExchangeHgQueryCondition extends Vue {
    searchParam: any = {
        fundIdList: [],
        groupCodeList: [],
        productTypeList: [],
        fundDirection: '',
        redeemLawdate: '',
        businessDate: null,
        marketName: '',
    };

    @Watch('searchParam', { deep: true, immediate: true })
    handleSearchParam(): void {
        this.$emit('comReturn', {
            isOpen: this.isOpen,
            searchParam: this.searchParam,
        });
    }
    isOpen: boolean = false;

    selectLoading: boolean = false;
    fundIds: any[] = []; // 产品序号下拉值

    assetUnits: any[] = []; // 资产单元编号/名称

    combinations: any[] = []; // 组合

    productTypes: any[] = []; // 产品类型

    marketTypes: any[] = []; // 交易市场

    fundDirections: any[] = [
        {
            dictKey: '1',
            dictKeyName: '融资',
        },
        {
            dictKey: '2',
            dictKeyName: '融券',
        },
    ]; // 交易市场

    @Prop({ default: false }) isFirst: boolean;

    @Prop({ default: false }) immediate: boolean;

    @Watch('isFirst')
    handleIsFirst() {
        this.isFirst && this.getDict();
    }

    // 字典值
    async getDict() {
        // 产品序号
        await new Promise((resolve, reject) => {
            this.$axios
                .post('/reportDict/fundId')
                .then((res: any) => {
                    this.fundIds = res;
                    resolve(res);
                })
                .catch((err) => {
                    reject(err);
                });
        });

        // 产品类型
        await new Promise((resolve, reject) => {
            this.$axios
                .post('assetSelectDict/byCode', {
                    dictCode: '40001',
                })
                .then((res: any) => {
                    this.productTypes = res;
                    resolve(res);
                })
                .catch((err) => {
                    reject(err);
                });
        });

        await new Promise((resolve, reject) => {
            this.$axios
                .post('/reportDict/market')
                .then((res: any) => {
                    this.marketTypes = res;
                    resolve(res);
                })
                .catch((err) => {
                    reject(err);
                });
        });
    }

    async handleButton(type: string) {
        if (type == 'reset') {
            (this.$refs['searchParam'] as any).resetFields();
        } else {
            this.$emit('handleButton', type);
        }
    }

    // 产品序号变化->组合编码
    @Watch('searchParam.fundIdList', { deep: true })
    async changeFundId(dictKey: string) {
        this.searchParam.groupCodeList = [];
        this.combinations = [];
        if (dictKey) {
            this.getCombination();
        }
    }

    // 组合编码下拉框
    getCombination() {
        return new Promise((resolve, reject) => {
            this.$axios
                .post('/assetSelectDict/queryFundCombination', {
                    dictKey: this.searchParam.fundIdList,
                })
                .then((res: any) => {
                    this.searchParam.groupCodeList = [];
                    this.combinations = res;
                    resolve(res);
                })
                .catch((err) => {
                    reject(err);
                });
        });
    }

    openBtn() {
        this.isOpen = !this.isOpen;
        this.handleSearchParam();
    }
}
</script>
<style lang="scss" scoped>
#header-content {
    display: flex;
    justify-content: space-between;
    padding: 15px 10px 15px 0;

    #header-query {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        // grid-template-columns: 12fr 12fr 10fr 10fr;
        // grid-template-columns: 1.2fr 1.2fr 1fr 1fr;
        /deep/ .el-form-item {
            margin-bottom: 4px;
            .el-form-item__label {
                color: black;
                padding-right: 2px;
            }
        }
        .isInput /deep/ .el-select__input {
            margin-left: 2px;
        }
    }

    #show-content {
        cursor: pointer;
    }
}

/deep/ span.el-tag.el-tag--info.el-tag--mini.el-tag--light {
    display: flex;
    align-items: center;
    width: 60%;
    max-width: fit-content;
    padding: 0px 5px 0 0;
    margin: 4px 0px 2px 2px;
    .el-select__tags-text {
        display: inline-block;
        font-size: 12px;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}
</style>
